<script setup>
// 导入 Vue 内置函数
import {
    defineProps,
    reactive
} from 'vue'

// 需要传递给父组件的数据
const person = reactive({
    name: '李四',
    age: 32
})

// 3. 子组件通过 props 接收父组件传递过来的
// 用于将子组件中的数据传递给父组件的方法
const props = defineProps(['getSonDataMethod'])

// 4. 子组件定义事件，触发该事件时
// 通过接收的用于传递数据给父组件的方法
// 将数据传递给父组件
function sendDataToFather() {
    // 调用接收到的方法将数据传给父组件
    // 只有在模板中使用 props 中的数据可以直接使用
    // 否则需要 `props.属性`
    props.getSonDataMethod(person)
}

</script>

<template>
    <div class="son">
        <h3>子组件</h3>
        <p>子组件中的数据：{{ person }}</p>
        <!-- 
            5. 通过点击按钮触发传递数据事件
         -->
        <button @click="sendDataToFather">将数据传递给父组件</button>
    </div>
</template>

<style lang="scss" scoped>
.son {
    height: 150px;
    width: auto;
    margin: 10px;
    background-color: chartreuse;
}
</style>